<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="selector">
  <option value="default">默认</option>
  <option value="addNode">添加节点</option>
  <option value="addEdge">添加边</option>
</select>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
  // 封装点击添加边的交互
  G6.registerBehavior('click-add-edge', {
    getEvents() {
      return {
        'node:click': 'onClick' ,
        mousemove: 'onMousemove',
        'edge:click': 'onEdgeClick' // 点击空白处，取消边
      };
    },
    onClick(ev) {
      const node = ev.item;
      const graph = this.graph;
      const point = {x: ev.x, y: ev.y};
      const model = node.getModel();
      if (this.addingEdge && this.edge) {
        graph.updateItem(this.edge, {
          target: model.id
        });
        // graph.setItemState(this.edge, 'selected', true);
        this.edge = null;
        this.addingEdge = false;
      } else {
        this.edge = graph.addItem('edge', {
          source: model.id,
          target: point
        });
        this.addingEdge = true;
      }
    },
    onMousemove(ev) {
      const point = {x: ev.x, y: ev.y};
      if (this.addingEdge && this.edge) {
        this.graph.updateItem(this.edge, {
          target: point
        });
      }
    },
    onEdgeClick(ev) {
      const currentEdge = ev.item;
      // 拖拽过程中，点击会点击到新增的边上
      if (this.addingEdge && this.edge == currentEdge) {
        graph.removeItem(this.edge);
        this.edge = null;
        this.addingEdge = false;
      }
    }
  });

  // 封装点击添加边的交互
  G6.registerBehavior('click-add-node', {
    getEvents() {
      return {
        'canvas:click': 'onClick'
      };
    },
    onClick(ev) {
      const graph = this.graph;
      const node = graph.addItem('node', {
        x: ev.x,
        y: ev.y,
        id: G6.Util.uniqueId()
      });
      // graph.setItemState(node, 'selected', true);// 添加后默认选中
    }
  });


  const data = {
    nodes: [{
      id: 'node1',
      x: 100,
      y: 200
    },{
      id: 'node2',
      x: 300,
      y: 200
    },{
      id: 'node3',
      x: 300,
      y: 300
    }],
    edges: [{
      id: 'edge1',
      target: 'node2',
      source: 'node1'
    }]
  };

  const graph = new G6.Graph({
    container: 'mountNode',
    width: 500,
    height: 500,
    modes: {
      default: ['drag-node', 'click-select'],
      addNode: ['click-add-node', 'click-select'],
      addEdge: ['click-add-edge', 'click-select']
    }
  });

  graph.data(data);
  graph.render();
  graph.on('graphstatechange', e => {
    console.log(e);
  });

  document.getElementById('selector').addEventListener('change', e => {
    const value = e.target.value;
    graph.setMode(value);
  });

</script>
</body>
</html>
